<template>
    <div class="app">
        <div class="box" v-if="this.isShow" ref="box">
            <div class="header" @mousedown="onMousedown">
                <slot name="header">title</slot>
                <div class="icon">
                    <i class="iconfont" @click="minsize" style="color: white;">&#xe65a;</i>
                    <i class="iconfont" @click="maxsize" style="color: white;">&#xe632;</i> 
                    <i class="iconfont" @click="close" style="color: white;">&#xe61a;</i>
                </div>
            </div>
            <div v-if="!isMin" class="content">
                <slot name="content">内容</slot>
                <div class="resize-handle top" @mousedown="startResize('top', $event)"></div>
                <div class="resize-handle left" @mousedown="startResize('left', $event)"></div>
                <div class="resize-handle bottom" @mousedown="startResize('bottom', $event)"></div>
                <div class="resize-handle right" @mousedown="startResize('right', $event)"></div>
            </div>
            <img src="../assets/images/dialog/c-bl.png" alt="" style="position: absolute;bottom: -3px;left: -3px;">
            <img src="../assets/images/dialog/c-br.png" alt="" style="position: absolute;bottom: -2px;right: -2px;">
            <img src="../assets/images/dialog/c-tl.png" alt="" style="position: absolute;top: -2px;left: -2px;">
            <img src="../assets/images/dialog/c-tr.png" alt="" style="position: absolute;top: -3px;right: -3px;">

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isDragging: false,
            isMin:false,
            isMax:false,
            isResize:false,
            offsetX: 0,
            offsetY: 0,
            originalX:0,
            originalY:0,
            originalWidth: 250,
            originalHeight: 420,
            riseDirect: '',
            startX: 0,
            startY: 0
        };
    }, 
    props:{
        Show:{
            type:Boolean
        }
    },
    computed: {
        isShow() {
            return this.Show;
        }},
   
    /*
    鼠标事件（mousedown,mouseup.mousemove）
    clientX:鼠标指针相对于浏览器视口左边界的水平坐标
    clientY：鼠标指针相对于浏览器视口上边界的垂直坐标
    offsetX:相对于事件目标元素左内边距的垂直坐标
    offsetY: 相对于事件目标元素上内边距的垂直坐标
    */
    methods: {
       
        onMousedown(event) {
            this.isDragging = true;
            // 获取原始鼠标位置
            this.offsetX = event.clientX;
            this.offsetY = event.clientY;
            // 获取弹窗的原始位置
            if(this.$refs.box){
                this.originalX = this.$refs.box.offsetLeft;
                this.originalY = this.$refs.box.offsetTop;
            }
            
            document.addEventListener('mousemove', this.onMousemove);
            document.addEventListener('mouseup', this.onMouseup);
            // 判断监听添加成功没有
            // console.log('mousemove and mouseup events added');
        },
        onMousemove(event) {
            if (this.isDragging) {
                // x移动的距离，y移动的距离
                const moveX = event.clientX - this.offsetX;
                const moveY = event.clientY - this.offsetY;
                // 弹窗的新位置
                const newX = moveX + this.originalX;
                const newY = moveY + this.originalY;
                // 更新弹窗位置
                if (this.$refs.box) {
                    this.$refs.box.style.left = newX + 'px';
                    this.$refs.box.style.top = newY + 'px';
                }
            }
            if (this.isResize) {
                const dx = event.clientX - this.startX;
                const dy = event.clientY - this.startY;
                const box = this.$refs.box;
                // 根据接收到的riseDirect去进行不同的改变
                switch (this.riseDirect) {
                    case 'top':
                        if (this.originalHeight - dy > 33) {
                            box.style.height = (this.originalHeight - dy) + 'px';
                            box.style.top = (this.originalY + dy) + 'px';
                        }
                        break;
                    case 'left':
                        if (this.originalWidth - dx > 0) {
                            box.style.width = (this.originalWidth - dx) + 'px';
                            box.style.left = (this.originalX + dx) + 'px';
                        }
                        break;
                    case 'bottom':
                        if (this.originalHeight + dy > 33) {
                            box.style.height = (this.originalHeight + dy) + 'px';
                        }
                        break;
                    case 'right':
                        if (this.originalWidth + dx > 0) {
                            box.style.width = (this.originalWidth + dx) + 'px';
                        }
                        break;
                }
            }
        },
        // 获取到移动状态和移动方向
        startResize(direct,event) {
            // 改变移动状态接收方向
            this.isResize = true;
            this.riseDirect = direct;
            this.startX = event.clientX;
            this.startY = event.clientY;
            this.originalWidth = this.$refs.box.offsetWidth;
            this.originalHeight = this.$refs.box.offsetHeight;
            this.originalX = this.$refs.box.offsetLeft;
            this.originalY = this.$refs.box.offsetTop;
            document.addEventListener('mousemove', this.onMousemove);
            document.addEventListener('mouseup', this.onMouseup);
        },
        onMouseup() {
            this.isDragging = false;
            this.isResize = false;
            document.removeEventListener('mousemove', this.onMousemove);
            document.removeEventListener('mouseup', this.onMouseup);
        },
        minsize() {
            //修改最小化的状态
            this.isMin =!this.isMin;
            if (this.isMin) {
                this.isMax = false;
                this.$refs.box.style.height = '33px';
                this.$refs.box.style.width = this.originalWidth + 'px';
            } else {
                this.$refs.box.style.height = this.originalHeight + 'px';
            }
            console.log('最小化状态:', this.isMin);
        },
        maxsize() {
            this.isMax =!this.isMax;
            if (this.isMax) {
                // 最大化时要把最小化的状态修改，否则后续最小化判断会有问题
                this.isMin = false;
                 // 保存当前宽高
                this.savedWidth = this.$refs.box.offsetWidth;
                this.savedHeight = this.$refs.box.offsetHeight;
                this.$refs.box.style.position = 'fixed';
                this.$refs.box.style.width = '100vw';
                this.$refs.box.style.height = '100vh';
                this.$refs.box.style.left = '0px';
                this.$refs.box.style.top = '0px';
                this.$refs.box.style.marginLeft = '0px';
               
            } else {
                // 恢复原始状态
                this.$refs.box.style.position = 'relative';
                this.$refs.box.style.width = this.savedWidth + 'px';
                this.$refs.box.style.height = this.savedHeight + 'px';
                this.$refs.box.style.width = this.originalWidth + 'px';
                this.$refs.box.style.height = this.originalHeight + 'px';
                this.$refs.box.style.left = this.originalX + 'px';
                this.$refs.box.style.top = this.originalY + 'px';
            }
            console.log('最大化状态', this.isMax);
        },
        close(){
            // 返回给父组件isShow的状态
            this.$emit('Close',this.isShow)
        }
    },
    beforeDestroy() {
        // 确保在组件销毁前移除事件监听器
        if (this.isDragging || this.isResize) {
            document.removeEventListener('mousemove', this.onMousemove);
            document.removeEventListener('mouseup', this.onMouseup);
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    width: 250px;
    height: 420px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    margin-left: 30px;
    position: relative;
    // z-index: 99;
    background-color: rgba(11,30,64, 0.7);
    border: 1px solid #0C64A1;
}

.header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 38px;
    background-color: rgba(11,30,64, 0.7);
    box-sizing: border-box;
    position: relative;
    color: white;
    line-height: 19px;
    font-size: 15px;
    border: 1px solid #0C64A1;
}

.icon {
    position: absolute;
    width: 90px;
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    right: 1px;
    top: 9px;
    cursor: default;
}

.content {
    // padding: 10px;
    background-color: rgba(11,30,64, 0.7);
    color: white;
}
.resize-handle {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}
.resize-handle.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 5px;
    cursor: ns-resize;
}

.resize-handle.left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 100%;
    cursor: ew-resize;
}

.resize-handle.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 5px;
    cursor: ns-resize;
}

.resize-handle.right{
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 100%;
    cursor: ew-resize;
    }
</style>    